<script setup lang="ts">
import type { StudentCourseRecommendResponse, StudentUnitStageResponse, StudentWordListRequestParams } from '@/api/types/student'
import { handleApiError, studentApi } from '@/api'
import NavBar from '@/components/NavBar/index.vue'
import { CourseType, RecentStage } from '@/enums/course'
import { useCurrentStudentInfoStore } from '@/stores/modules/useCurrentStudentInfoStore'
import { useStudentUnitStore } from '@/stores/modules/useStudentUnitStore'
import { useUnitStudyWordsStore } from '@/stores/modules/useUnitStudyWordsStore'
import { navigateBack, navigateTo } from '@/utils/navigation'
import { onShow } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import StudentTabBar from '../components/StudentTabBar.vue'
import CourseInfo from './components/CourseInfo.vue'
import Header from './components/Header.vue'
import ProgressEcharts from './components/ProgressEcharts.vue'
// import StatsGrid from './components/StatsGrid.vue'

const studentUnitStore = useStudentUnitStore()
const unitStudyWordsStore = useUnitStudyWordsStore()
const studentInfoStore = useCurrentStudentInfoStore()
const unitStageInfo = ref<StudentUnitStageResponse>({
  wordStudyInfo: {
    totalNum: 0,
    studiedNum: 0,
    recentStage: 0,
  },
})

// 按钮状态
const buttonStatus = computed(() => {
  const { studiedNum, recentStage, totalNum } = unitStageInfo.value.wordStudyInfo
  // 已学习数量 = 总数量 按钮展示下一单元
  if (studiedNum === totalNum) {
    return 'next'
  }
  if (recentStage === RecentStage.PRE_CHECK) {
    return 'start'
  }
  // 继续学习
  return 'continue'
})

const recommendInfo = ref<StudentCourseRecommendResponse>({
  course: {
    id: 0,
    name: '',
  },
  currentUnitNo: 0,
  wordSummary: {
    totalNum: 0,
    shorthandNum: 0,
    completed: false,
    status: 1,
  },
})

function handlePracticeReviewClick() {
  navigateTo({
    url: '/pages/wordStudy/reviewCheck',
    params: {
      type: 'practiceReview',
      studentId: studentInfoStore.studentId,
      courseId: recommendInfo.value.course.id,
      unitNo: recommendInfo.value.currentUnitNo,
    },
  })
}

async function loadCourseRecommend() {
  const [error, result] = await studentApi.getCourseRecommend({ studentId: studentInfoStore.studentId, lessonId: studentInfoStore.lessonId })
  if (error) {
    return handleApiError(error)
  }
  recommendInfo.value = result.data
}

// 公共参数获取
function getRequestParams() {
  return {
    studentId: studentInfoStore.studentId,
    courseId: recommendInfo.value.course.id,
    unitNo: recommendInfo.value.currentUnitNo,
    lessonId: studentInfoStore.lessonId,
  }
}

function handleStart() {
  const params: StudentWordListRequestParams = getRequestParams()
  studentUnitStore.updateCourseType(CourseType.OTHER)
  unitStudyWordsStore.startPreCheckStudy(params)
}

function handleNextUnit() {
  const params: StudentWordListRequestParams = getRequestParams()
  studentUnitStore.updateCourseType(CourseType.OTHER)
  // TODO 下一单元
  params.unitNo = 9991
  unitStudyWordsStore.startPreCheckStudy(params)
}

function handleSelectCourse() {
  navigateTo({
    url: '/pages/student/courseList/index',
    params: {
      studentId: studentInfoStore.studentId,
    },
  })
}

function handleChangeUnit() {
  // 切换单元
  navigateTo({
    url: '/pages/student/unitSelect/index',
    params: {
      studentId: studentInfoStore.studentId,
      courseId: recommendInfo.value.course.id,
    },
  })
}

// 获取单元阶段数据
async function loadUnitStage() {
  const [error, result] = await studentApi.getUnitStage(getRequestParams())
  if (error) {
    handleApiError(error)
  }
  unitStageInfo.value = result!.data
}

onShow(async () => {
  await loadCourseRecommend()
  loadUnitStage()
})
</script>

<template>
  <view class="course-page">
    <NavBar title="课程" @left-click="navigateBack" />
    <Header />

    <view class="course-content">
      <CourseInfo :course-name="recommendInfo.course.name" :unit-name="`Unit ${recommendInfo.currentUnitNo}`" @select-course="handleSelectCourse" @change-unit="handleChangeUnit" />

      <ProgressEcharts :total-num="recommendInfo.wordSummary.totalNum" :shorthand-num="recommendInfo.wordSummary.shorthandNum" />

      <view class="groups-btns">
        <uv-button
          v-if="buttonStatus === 'next'" type="success" size="large" text="下一单元" plain
          @click="handleNextUnit"
        />
        <uv-button
          v-if="buttonStatus === 'start'"
          type="success" size="large" text="开始记单词" plain @click="handleStart"
        />
        <uv-button
          v-if="buttonStatus === 'continue'"
          type="success" size="large" text="继续学习" plain @click="handleStart"
        />
      </view>

      <uv-button
        type="primary"
        size="large" text="陪练复习" plain @click="handlePracticeReviewClick"
      />

      <!-- <StatsGrid @practice-review-click="handlePracticeReviewClick" /> -->
    </view>

    <StudentTabBar :value="0" />
  </view>
</template>

<style lang="scss" scoped>
.course-page {
    min-height: 100vh;
    background-color: #f8f9fc;
    padding-bottom: 100rpx;

    .course-content {
        padding: 30rpx;
    }

    .groups-btns{
        margin: 30rpx 0;
    }
}
</style>
